<template>
  <el-form-item label="默认值">
    <div style="display: flex;">
      <el-select v-model="value.type" placeholder="请选择" required style="width:100px;">
        <el-option label="常量" value="value"></el-option>
        <el-option label="字段" value="objselect_field"></el-option>
      </el-select>
      <el-input v-model="value.value" placeholder="请输入" required v-if="value.type=='value'" />
      <el-select clearable v-if="value.type=='objselect_field'" v-model="value.objselect_field.field__vModel__"
        filterable remote reserve-keyword placeholder="请输入关键词" @visible-change="handleVisibleChange"
        :remote-method="remoteMethod" :loading="loading">
        <el-option v-for="item in control.fields" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select clearable v-model="value.objselect_field.targetObject_fieldcode" placeholder="请选择"
        v-if="value.type=='objselect_field'">
        <el-option v-for="item in control.targetObjectfields" :key="item.name" :label="item.name + ' - ' + item.comment"
          :value="item.name">
          {{item.name}} - {{item.comment}}
        </el-option>
      </el-select>

    </div>
  </el-form-item>
</template>

<script>
  import {
    getDrawingList
  } from '@/utils/db';
  import {
    xcflowGenerateRequestUrl
  } from '@/utils/xcflow';

  export default {
    props: {
      value: {
        type: Object,
        default: null
      },
    },
    watch: {
      'value.objselect_field.field__vModel__': {
        handler(newVal, oldVal) {
          let that = this;

          let foundField = null;
          let fields = getDrawingList();
          for (let index in fields) {
            let field = fields[index];
            console.log(field['__vModel__'], newVal, '@@');
            if (field['__vModel__'] == newVal) {
              foundField = field;
            }
          }
          console.log('====', foundField);
          if (foundField != null) {
            that._loadTablefields(foundField['xcform_base_selecttablefield']['tablename']);
          }

        },
        deep: true
      },
    },
    data() {
      return {
        sp: {},
        sr: {},
        control: {
          loading: false,
          fields: [],
          targetObjectfields: [],
        }
      }
    },
    created(options) {
      let that = this;
      that.xinit();
    },
    methods: {
      xinit() {
        let that = this;
        if (that.value.type == null) {
          that.value.type = "value";
          that.value.objselect_field = {
            field__vModel__: "",
            fieldcode: "",
            targetObject_fieldcode: "",
          };
          // alert(that.value.objselect_field.field__vModel__);
        }
      },
      handleVisibleChange(visible) {
        let that = this;
        if (visible) {
          that.remoteMethod("");
        }
      },
      remoteMethod(query) {
        let that = this;

        that.control.fields = [];
        that.control.loading = true;
        let fields = getDrawingList();
        for (let index in fields) {
          let field = fields[index];
          if (field['__config__']['tag'] == 'xcform_control_objselect') {
            that.control.fields.push({
              label: field['xcform_base_xctitle']['value'],
              value: field['__vModel__']
            });
          }
        }
      },
      _loadTablefields(tablename) {
        let that = this;
        let url = xcflowGenerateRequestUrl(this, "queryFieldsByTableName?tablename=" + tablename);
        let method = 'get';
        that.$axios({
          method,
          url
        }).then(resp => {
          that.control.targetObjectfields = resp.data.data.list;
        });
      }
    }
  }
</script>

<style>

</style>
